<link rel="stylesheet" href="${request.contextPath}/static/css/login.css">
<section class="login-section <#if isMobile == true>is-mobile</#if>">
	<div class="login-header">
		<i class="iconfont iconbuzhichi" onclick="hideLogin()"></i>
	</div>
	<div class="login-body">
        <#include "./login.ftl">
        <#include "./register.ftl">
        <#include "./forgot.ftl">
        <#include "./otherLogin.ftl">
		<div class="login-footer-tx">
			Not registered yet? <a href="javascript:;" onclick="toRegister()">Create a new account</a>
		</div>
	</div>
</section>
<script>
    function login(email, pwd) {
        showLoading()
        _axios.post('/v1/login', {
            email:email,
            password: pwd
        }).then(res => {
            if(res.Code === 200) {
                window.location.reload()
            } else {
                hideLoading()
                showToast(res.Msg)
            }
        })
    }
    function toForget() {
        document.querySelectorAll('.login-section .login-wrap').forEach((item, index) => {
            if(index === 2) {
                item.show()
                document.querySelector('.login-section .login-footer-tx').innerHTML =
	                'Not registered yet? <a href="javascript:;" onclick="toRegister()">Create a new account</a>'
            }else {
                item.hide()
            }
        })
    }
    function toRegister() {
        document.querySelectorAll('.login-section .login-wrap').forEach((item, index) => {
            if(index === 1) {
                item.show()
                document.querySelector('.login-section .login-footer-tx').innerHTML =
                    'Already have an account ?  <a href="javascript:;" onclick="toLogin()">Sign in</a>'
            }else {
                item.hide()
            }
        })
    }
    function sendCode(email, btn) {
        btn.showLoading()
	    let second = 60
        _axios.post('/v1/send/code', {
            email: email
        }).then(res => {
            showToast(res.Msg, 1000)
            btn.hideLoading()
            btn.removeAttribute('style')
            if(res.Code === 200) {
                btn.style.color = '#909399'
                btn.style.backgroundColor = '#F5F7FA'
                btn.style.border = '1px solid #dcdfe6'
                btn.setAttribute('disabled', 'disabled')
                btn.innerText = second + 's'
                second --
                let timer = setInterval(() => {
                    if(second < 1) {
                        clearInterval(timer)
                        btn.innerText = 'Aquire'
                        btn.removeAttribute('style')
                        btn.removeAttribute('disabled')
                        return false
                    }
                    btn.innerText = second + 's'
                    second --
                }, 1000)
            }
        })
    }
</script>